<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<style>
    
</style>
<body>
    <div class="box">
        <input type="password" id="passwordInput"> <!-- 密码输入框元素  -->
<img src="t2.jpg" style='width: 30px;height: 30px; position: relative; top: 10px; 'id="eyeImage"onclick="toggleVisibility()">     <!--  给图片元素绑定一个点击事件 -->
    </div>
    <script>
         function toggleVisibility() {    
    var input = document.getElementById("passwordInput");
    var image = document.getElementById("eyeImage");

    if (input.type === "password") {
        input.type = "text";
        image.src = "t2.jpg";
    } else {
        input.type = "password";
        image.src = "t3.jpg";
    }
}
            
    </script>

</body>
</html>